<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Alternative placeholder behavior - Robert Nyman</title>
	<link rel="stylesheet" href="../css/base.css" type="text/css" media="screen">
	<!--[if lte IE 8]>
		<script src="../js/html5.js"></script>
	<![endif]-->
	<style>
	    label {
	        display: block;
	        font-weight: bold;
	        margin: 0 5px 5px;
	    }
	    input {
	        display: block;
	        margin: 0 5px 20px;
	    }
	    
	    form input[data-placeholder] {
          color: #aaa;
        }

        form input[data-placeholder].active {
          color: #000;
        }    
	</style>
</head>

<body>
	
	<div id="container">
		<header role="banner">
			<h1>Alternative placeholder behavior <a href="../index.html">back to playground</a></h1>
			<p>Mimicking the native placeholder behavior in iOS, i.e. not replacing placeholder text until the user actually starts typing.</p>
		</header>
		
		<div role="main">
			<section id="main-content">
				<h2>Placeholder demo</h2>
				
				<form action="index.html" novalidate>
				    <label for="first-name">First name</label>
                    <input type="text" id="first-name" name="first-name" placeholder="E.g. Robert">
                    
                    <label for="last-name">Last name</label>
                    <input type="text" id="last-name" name="last-name" placeholder="E.g. Nyman">
                    
                    <label for="phone-no">Phone no</label>
                    <input type="tel" id="phone-no" name="phone-no" placeholder="What is your phone no?">
                    
                    <label for="email-address">E-mail</label>
                    <input type="email" id="email-address" name="email-address" placeholder="Enter your e-mail address">
                    
                    <label for="user-pwd">Password</label>
                    <input type="text" id="user-pwd" name="user-pwd" data-type="password" placeholder="Choose a password">
                    
                    <label for="user-pwd-repeat">Repeat password</label>
                    <input type="text" id="user-pwd-repeat" name="user-pwd-repeat" data-type="password" placeholder="Repeat your entered password">
                          
                    <input type="submit" value="Send to myself">
                </form>
				
			</section>
		</div>
		
		<footer id="page-footer" role="contentinfo">
			Created by <a href="http://robertnyman.com/">Robert Nyman</a>
		</footer>
	</div>
	
	<script>
        var dataPlaceholders = document.querySelectorAll("input[placeholder]"),
            l = dataPlaceholders.length,
            
            // Set caret at the beginning of the input
            setCaret = function (evt) {
                if (this.value === this.getAttribute("data-placeholder")) {
                    this.setSelectionRange(0, 0);
                    evt.preventDefault();
                    evt.stopPropagation();
                    return false;
                }
            },
            
            // Clear placeholder value at user input
            clearPlaceholder = function (evt) {
                if (!(evt.shiftKey && evt.keyCode === 16) && evt.keyCode !== 9) {
                    if (this.value === this.getAttribute("data-placeholder")) {
                        this.value = "";
                        this.className = "active";
                        if (this.getAttribute("data-type") === "password") {
                            this.type = "password";
                        }
                    }
                } 
            },
        
            restorePlaceHolder = function () {
                if (this.value.length === 0) {
                    this.value = this.getAttribute("data-placeholder");
                    setCaret.apply(this, arguments);
                    this.className = "";
                    if (this.type === "password") {
                        this.type = "text";
                    }
                }
            },
        
            clearPlaceholderAtSubmit = function (evt) {
                for (var i=0, placeholder; i<l; i++) {
                    placeholder = dataPlaceholders[i];
                    if (placeholder.value === placeholder.getAttribute("data-placeholder")) {
                        placeholder.value = "";
                    }
                }
            };
        
            for (var i=0, placeholder, placeholderVal; i<l; i++) {
                placeholder = dataPlaceholders[i];
                placeholderVal = placeholder.getAttribute("placeholder");
                placeholder.setAttribute("data-placeholder", placeholderVal);
                placeholder.removeAttribute("placeholder");
                
                if (placeholder.value.length === 0) {
                    placeholder.value = placeholderVal;
                    if (placeholder.type === "password") {
                        placeholder.type = "text";
                    }
                }
                else {
                    placeholder.className = "active";
                }
            
                // Apply events for placeholder handling         
                placeholder.addEventListener("focus", setCaret, false);
                placeholder.addEventListener("drop", setCaret, false);
                placeholder.addEventListener("click", setCaret, false);
                placeholder.addEventListener("keydown", clearPlaceholder, false);
                placeholder.addEventListener("keyup", restorePlaceHolder, false);
                placeholder.addEventListener("blur", restorePlaceHolder, false);
            
                // Clear all default placeholder values from the form at submit
                placeholder.form.addEventListener("submit", clearPlaceholderAtSubmit, false);
            }
	</script>
	
	<script>
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-56164-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
			})();

			var sc_project=593937,
				sc_partition=4,
				sc_security="175a1fec";
		</script>

		<script src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c5.statcounter.com/counter.php?sc_project=593937&amp;java=0&amp;security=175a1fec" alt="free geoip"></a></div></noscript>
	
	
	
</body>
</html>
